<template>
  <div class="shopcat">
    <div class="list">
      <div class="list-per"
           v-for="(item,index) in cartData">
        <div class="contain-outer"
             ref="cartCell">
          <div class="contain">
            <div class="radio"
                 v-if="!showDeleteArr[index]"
                 @click="clickPerRadio(index)"
                 :class="{'radio-selected': selectedArr[index] === true}"></div>
            <div class="img"
                 @click="clickPerRadio(index)"><img :src="item.img">
            </div>
            <div class="goods-info"
                 @click.stop="goDetails(item, index)">
              <div class="desc maxLine1">{{item.pdname}}</div>
              <div class="skus maxLine1">
                <div>{{item.psname}}</div>
              </div>
              <div class="price">{{item.psprice | math-mul(item.discount) | math-round(2,1) |math-money}}</div>
            </div>
            <div class="sum">
              <edit-choose minValue="0"
                           :nvalue.sync="item.cartnumber"
                           maxValue="99999"></edit-choose>
            </div>

          </div>
          <div class="delete"
               @click="deleteItem(item,index)"
               v-if="showDeleteArr[index]">
            <div>删</div>
            <div>除</div>
          </div>
        </div>
        <div class="dividing"></div>
      </div>
    </div>
    <error-page :imgWidth="257"
                :imgHeight="295"
                emptyImg="empty-shopcat"
                :type="'text'"
                emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>咦，购物车竟然是空的~</span>"
  
                bottom="216"
                class="absolute-clazz"
                v-if="cartData.length === 0 && loading === false" />
    <div class="bottom-info">
      <div class="left"
           @click="clickAllSelected()">
        <div class="radio"
             :class="{'radio-selected': isSelectedAll}"></div>
        <div class="all-select-text">全 选
        </div>
        <div class="price">{{calcPrice | math-mul(discount) | math-round(2,1) | math-money}}</div>
      </div>
      <div class="right">
        <button class="go-pay"
                :disabled="noHaveSelected || cartData.length === 0"
                @click="goPay">去结算</button>
      </div>
    </div>
    <home-nav></home-nav>
  </div>
</template>

<script>
import mixins from '@/mixins'
import HomeNav from '@/components/home-nav'
import ErrorPage from '@/components/error-page'
import editChoose from '@/components/common-pages/edit-choose'
import {calc} from '@/_util'
export default {
  name: 'shopcat',
  mixins: [mixins],
  data () {
    return {
      cartData: [],
      selectedArr: [],
      btnIsAllSelected: false,
      loading: true,
      showDeleteArr: [],
      discount: 0
    }
  },
  computed: {
    // 有没有选中的，设置去结算按钮是否可点击
    noHaveSelected () {
      let haveSelected = true
      if (this.cartData.length === 0 || this.selectedArr.length === 0) {
        haveSelected = false
      }
      for (let i = 0; i < this.cartData.length; i++) {
        if (this.selectedArr[i] === true) {
          haveSelected = false
          break
        }
      }
      return haveSelected
    },
    // 是不是全选
    isSelectedAll () {
      let isSelectedAll = true
      if (this.cartData.length === 0 || this.selectedArr.length === 0) {
        isSelectedAll = false
      }
      for (let i = 0; i < this.cartData.length; i++) {
        if (this.selectedArr[i] === false) {
          isSelectedAll = false
          break
        }
      }
      this.btnIsAllSelected = isSelectedAll
      return isSelectedAll
    },
    calcPrice () {
      let priceSum = 0
      for (let i = 0; i < this.cartData.length; i++) {
        if (this.selectedArr[i]) {
          let pricePer = calc(this.cartData[i].psprice).mul(this.cartData[i].cartnumber).over()
          priceSum = calc(priceSum).add(pricePer).over()
        }
      }
      return priceSum
    }
  },
  destroyed () {
  },
  async mounted () {
    await this.requestNet()
    this.initSelectedArr()
    this.initDeleteArr()
    this.initCell()
  },
  methods: {
    // 前往商品详情
    goDetails (item, index) {
      this.$router.push({name: 'productdetails', query: {pdid: item.pdid}})
    },
    // 初始化 删除数组
    initDeleteArr (isAllTrue = false) {
      for (let i = 0; i < this.cartData.length; i++) {
        this.showDeleteArr.splice(i, 1, isAllTrue)
      }
    },
    // 为每个商品设置监听事件，用来滑动时弹出删除按钮
    initCell () {
      this.$nextTick(() => {
        let cell = this.$refs.cartCell
        let self = this
        for (let i = 0; i < this.showDeleteArr.length; i++) {
          let startX = 0
          let endX = 0
          cell[i].addEventListener('touchstart', function (event) {
            let touch = event.touches[0]
            startX = parseInt(touch.pageX)
          })
          cell[i].addEventListener('touchmove', function (event) {
            let touch = event.touches[0]
            endX = touch.pageX
            let deltaX = endX - startX
            // 向左移动
            if (deltaX < -30) {
              self.showDeleteArr.splice(i, 1, true)
            }
            // 向右移动
            if (deltaX > 30) {
              self.showDeleteArr.splice(i, 1, false)
            }
          })
          cell[i].addEventListener('touchend', function (event) {
            startX = 0
            endX = 0
          })
        }
      })
    },
    // 删除选中的商品
    async deleteItem (item, index) {
      try {
        let result = await this.$ajax.del('/tCart/deleteByCartid.json', {cartid: item.cartid})
        if (result && result.result - '0' > 0) {
          this.selectedArr.splice(index, 1)
          this.cartData.splice(index, 1)
        }
      } catch (e) {
        this.$toast(e)
      }
    },
    // 点击全选
    clickAllSelected () {
      this.initSelectedArr(!this.btnIsAllSelected)
    },
    // 请求网络
    async requestNet () {
      this.loading = true
      try {
        this.cartData = await this.$ajax.get('/tCart/cartList.json')
        this.discount = (this.cartData && this.cartData[0].discount) || 0
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
      for (let i = 0; i < this.cartData.length; i++) {
        this.selectedArr.splice(i, 0, false)
      }
    },
    // 初始化全选数组
    initSelectedArr (isAllTrue = false) {
      for (let i = 0; i < this.cartData.length; i++) {
        this.selectedArr.splice(i, 1, isAllTrue)
      }
    },
    // 点击商品前面的按钮
    clickPerRadio (index) {
      let changItem = this.selectedArr[index]
      this.selectedArr.splice(index, 1, !changItem)
    },
    // 去结算按钮点击 后 创建的订单
    createOrder: function () {
      let tempArr = []
      for (let i = 0; i < this.selectedArr.length; i++) {
        if (this.selectedArr[i]) {
          let data = this.cartData[i]
          if (data.cartnumber > 0) {
            tempArr.push({
              psid: data.psid,
              cartnumber: data.cartnumber,
              cartid: data.cartid
            })
          }
        }
      }
      return tempArr
    },
    // 去结算按钮点击
    goPay () {
      let tempArr = this.createOrder()
      if (tempArr.length > 0) {
        this.$router.push({name: 'confirm-order', query: { list: JSON.stringify(tempArr), iscart: '1' }})
      }
    }
  },
  components: {
    HomeNav,
    editChoose,
    ErrorPage
  }
}
</script>


<style lang="stylus" scoped>
.shopcat {
  background: rgba(246, 246, 246, 1);
  height: 85vh;
  overflow: hidden;
  overflow-y: scroll;

  .list {
    display: flex;
    flex-direction: column;

    .list-per {
      background: rgba(246, 246, 246, 1);

      .contain-outer {
        display: flex;
        background: white;

        .contain {
          display: flex;
          flex: 1;
          align-items: center;
          padding-top: 15px;
          padding-bottom: 15px;

          .radio {
            width: 30px;
            height: 30px;
            border: 1px solid rgba(153, 153, 153, 1);
            border-radius: 50%;
            margin-left: 26px;
          }

          .img {
            width: 130px;
            height: 130px;
            margin-left: 33px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .goods-info {
            margin-left: 21px;
            display: flex;
            flex-direction: column;
            height: 130px;
            width: 250px;

            .desc {
              font-size: 28px;
              color: rgba(44, 48, 56, 1);
            }

            .skus {
              display: flex;

              div {
                font-size: 28px;
                color: rgba(44, 48, 56, 1);
                padding-left: 13px;
                padding-right: 13px;
                padding-top: 3px;
                padding-bottom: 3px;
                background: rgba(245, 245, 245, 1);
              }
            }

            .price {
              font-size: 28px;
              color: rgba(227, 20, 54, 1);
              display: flex;
              flex: 1;
              align-items: flex-end;
            }
          }

          .sum {
            display: flex;
            flex: 1;
            height: 130px;
            justify-content: flex-end;
            align-items: flex-end;
            font-size: 24px;
            color: rgba(44, 48, 56, 1);
            margin-right: 31px;
          }
        }

        .delete {
          background: RGBA(239, 177, 14, 1);
          height: 163px;
          width: 81px;
          font-size: 28px;
          color: rgba(255, 255, 255, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 24px;
          line-height: 40px;
          font-weight: 400;
          flex-direction: column;
        }
      }

      .dividing {
        width: 641px;
        height: 1px;
        background: rgba(230, 230, 230, 1);
        margin-left: 84px;
        box-sizing: border-box;
      }
    }
  }

  .bottom-info {
    display: flex;
    align-items: center;
    height: 108px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0px 0px rgba(217, 217, 217, 0.5);
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 92px;

    .left {
      display: flex;
      align-items: center;
      padding-left: 23px;

      .radio {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(148, 152, 158, 1);
        border-radius: 50%;
        margin-right: 21px;
      }

      .all-select-text {
        font-size: 30px;
        color: rgba(44, 48, 56, 1);
        margin-right: 32px;
      }

      .price {
        font-size: 30px;
        color: rgba(227, 20, 54, 1);
      }
    }

    .right {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      align-items: center;
      padding-right: 33px;

      .edit {
        font-size: 30px;
        color: rgba(44, 48, 56, 1);
        margin-right: 40px;
      }

      .go-pay {
        width: 156px;
        height: 70px;
        background: rgba(174, 42, 38, 1);
        border-radius: 9px;
        font-size: 30px;
        color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;

        &:disabled {
          background-color: #ececec;
          border: 1px solid #ececec;
          color: #333333;
        }
      }
    }
  }
}

.radio-selected {
  background: url('~@image/icon-checked.png');
  background-size: 31px 31px;
  width: 31px;
  height: 31px;
  background-repeat: no-repeat;
  border: 1px solid white !important;
}
</style>
